<!DOCTYPE html>

<html>
	<head>
		<meta charset="UTF-8"/>
		
		<title>TY Poker</title>
		
		<link rel="stylesheet" href="buttonStyle.css"/>
		<link rel="stylesheet" href="defaultStyle.css"/>
		
		<script src="scripts/jquery.js"></script>
		<script src='dwr/engine.js'></script>
		<script src='dwr/util.js'></script>
		<script src='dwr/interface/GameProxy.js'></script>
		<script src="scripts/setup.js"></script>
	</head>
	
	<body>
		<div id="offline"></div>
        
		<div id="joiningPanelContainer">
			<div id="joiningPanelTd">
				<div id="joiningPanel">
					<form method="POST">
						<input id="startGame" class="button large green" type="button"	value="Start the game"/>
						<input id="pickYourAvatar"	class="button large blue" type="button"
							value="Pick your avatar"/>
						<input id="leaveGame" class="button large red" type="button" value="Leave the game"/>
					</form>
				</div>
			</div>
		</div>
	
		<div id="pickAvatarContainer">
			<div id="pickAvatarTd">
				<div id="pickAvatar">
					<div id="avatarPositioning">
						<img class="avatarImage" id="avatar1"
							src="resources/avatars/avatar1.jpg" alt="Avatar1"
							onclick="selectAvatar(this.id)"/>
						<img class="avatarImage" id="avatar2"
							src="resources/avatars/avatar2.jpg" alt="Avatar2"
							onclick="selectAvatar(this.id)"/>
						<img class="avatarImage" id="avatar3"
							src="resources/avatars/avatar3.jpg" alt="Avatar3"
							onclick="selectAvatar(this.id)"/>
						<br/>
						<br/>
						<form method="POST">
							<input id="nameInput" type="text" maxlength="10"/>
							<br/>
							<br/>
							<input id="submitInfo" class="button small blue" type="button"
								value="Submit data"/>
						</form>
						<br/>
						<span id="infoSumbitError"></span>
					</div>
				</div>
			</div>
		</div>	
	
		<div id="contentHolder">
			<div id="gameTableHolder">
				<div id="gameTableBg"></div>
				
				<div id="gameTableTd">
					<div id="gameTable">
					</div>
				</div>
			</div>
			
			<div id="bottomBar">
				<div id="chat">
					<textarea id="chatArea" readonly="readonly"></textarea>
					<form id="chatInsert" method="POST" onSubmit="return false">
						<input id="chatInput" type="text" maxlength="160"/>
						<input id="chatSubmit" class="button small green" type="button" value="Send"/>
					</form>
				</div>

				<div id="buttons">
					<div id="buttonsTd">
						<form id="buttonsContainer" method="POST">
						</form>
					</div>
				</div>
	
				<div id="leaveButton">
					<div id="leaveButtonTd">
						<form method="POST">
							<input id="leaveTableButton" class="button large red" type="button"
								value="Leave" onclick="leaveTable()"/>
					</form>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>